<template>
  <view class="cate">
    <!-- 左侧分类列表 -->
    <scroll-view class="cate-list">
      <view class="item" 
        :class="{active: item.id == selectedId}" 
        v-for="(item, index) in cateList" 
        :key="index"
        @tap="selectCate(item.id)"
      >
        {{item.name}}
      </view>
    </scroll-view>
    
    <!-- 右侧商品列表 -->
    <scroll-view class="cate-goods" scroll-y>
      <view class="goods-list">
        <view class="goods-item" v-for="(item, index) in goodsList" :key="index">
          <view class="goods-img">
            <image :src="item.goods_big_logo" mode="aspectFill"></image>
          </view>
          <view class="goods-info">
            <view class="goods-name">{{item.name}}</view>
            <view class="goods-price">¥{{item.price}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style scoped>
.cate {
    display: flex;
    height: 100vh;
    background: #fff;
}

/* 左侧分类列表 */
.cate-list {
    width: 180rpx;
    height: 100%;
    background: white;
    color: black;
}

.cate-list .item {
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 28rpx;
    /* border-bottom: 1rpx solid rgba(255,255,255,0.1); */
}

.cate-list .active {
    background: #ff4400;
    color: #fff;
}

/* 右侧商品列表 */
.cate-goods {
    flex: 1;
    height: 100%;
    background: #fff;
}

.goods-list {
    padding: 20rpx;
}

.goods-item {
    display: flex;
    padding: 20rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.goods-img {
    width: 160rpx;
    height: 160rpx;
    margin-right: 20rpx;
}

.goods-img image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.goods-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.goods-name {
    font-size: 28rpx;
    color: #333;
    line-height: 1.4;
    margin-bottom: 10rpx;
    /* 文本超出两行显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goods-price {
    font-size: 32rpx;
    color: #ff4400;
    font-weight: bold;
}

/* 修改滚动条样式 */
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}
</style>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 分类列表数据
const cateList = ref([
    { id: 0, name: '全部' },
    { id: 1, name: '数码配件' },
    { id: 2, name: '智能设备' },
    { id: 3, name: '影音娱乐' },
    { id: 4, name: '电脑整机' },
    { id: 5, name: '电脑配件' },
    { id: 6, name: '电脑外设' },
    { id: 7, name: '手机配件' },
    { id: 8, name: '品牌手机' },
    { id: 9, name: '饮料饮品' },
    { id: 10, name: '休闲美食' },
    { id: 11, name: '办公文具' },
    { id: 12, name: '便签笔记本' }
])
// 选中的分类ID
const selectedId = ref(0)
// 商品列表数据
const goodsList = ref([])
// 添加显示控制变量
const isShowLeft = ref(true)  // 控制左侧分类列表
const isShowRight = ref(false) // 控制右侧商品列表

// 切换左侧分类列表显示
function toggleLeft() {
    isShowLeft.value = !isShowLeft.value
    console.log('左侧显示状态：', isShowLeft.value)
}

// 切换右侧商品列表显示
function toggleRight() {
    isShowRight.value = !isShowRight.value
    console.log('右侧显示状态：', isShowRight.value)
}

onLoad(() => {
    console.log('页面加载')
    getCateList()
})

// 获取分类列表
async function getCateList() {
    let res = await uni.$post('/categoryListLevel', {
        "level": 1
    })
    if (res.code == 200) {
        cateList.value = [{id: 0, name: "全部"}, ...res.result]
        // 默认获取全部商品
        getGoodsByCateOneId(0)
    }
}

// 选择分类
async function selectCate(id) {
    console.log('选择分类:', id)
    if (selectedId.value === id) return
    selectedId.value = id
    await getGoodsByCateOneId(id)
}

// 获取商品列表
async function getGoodsByCateOneId(cid) {
    console.log('开始获取商品列表, cid:', cid)
    try {
        let res
        if (cid !== 0) {
            // 获取指定分类商品
            res = await uni.$post("/goodsList_catTwo", {
                "cat_two_id": cid
            })
            console.log('分类商品响应:', res)
        } else {
            // 获取全部商品
            res = await uni.$get("/goodsList")
            console.log('全部商品响应:', res)
        }
        
        if (res.code === 200) {
            goodsList.value = res.goodsList.map(item => {
                console.log('处理商品项:', item)
                return {
                    ...item,
                    goods_big_logo: uni.$base_url + item.goods_big_logo
                }
            })
        } else {
            uni.showToast({
                title: '获取商品列表失败',
                icon: 'none'
            })
        }
    } catch (error) {
        uni.showToast({
            title: '网络请求失败',
            icon: 'none'
        })
    }
}
</script>